<template>
    <div class="box">
        <button @click="backHome">回到首页</button>
        <img class="img" src="../../../public/404.png" alt="">
        
    </div>
</template>

<script setup lang="ts">
import { useRouter } from 'vue-router';
const $router=useRouter()
const backHome=()=>{
    $router.push('/')
}
</script>

<style lang="scss" scoped>
.box{
    width: 100%;
    height: 100vh;
    background-color: aqua;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    .img{
        flex: 5;
    }
    button{
        width: 150px;
        flex: 0.3;
        background-color: skyblue;
        border-radius: 20px;
        margin-top: 20px;
        border: none;
        color: rgb(26, 23, 20);
        font-size: 20px;
    }
    button:hover{
        background-color: rgb(73, 189, 235);
        box-shadow: 5px 5px 8px gray;
    }
    
}
</style>